<template>
  <div id="app">
    <v-heade v-show="bHeader" />
    <!-- 自闭和组件 -->
    <router-view />
    <v-footer v-show="bFooter" />
  </div>
</template>

<script>
import VHeade from "../components/MyHeader.vue";
import VFooter from "../components/MyFooter.vue";
export default {
  name: "App",
  data() {
    return {
      // 用状态量控制头尾组件是否显示
      bHeader: true,
      bFooter: true,
    };
  },
  // 用监听来监听这个状态量
  watch: {
    $route(value) {
      let path = value.path;
      // 详情页的路径
      let path2 = value.meta.path;
      // 可以使用正则判断当前路径来决定是否显示

      // 显示头尾
      if (/main/.test(path)) {
        this.bHeader = true;
        this.bFooter = true;
      }
      // 只显示头
      if (/enc|sort/.test(path)) {
        this.bHeader = true;
        this.bFooter = false;
      }
      // 只显示尾
      if (path.includes("mine") || /topic|goods/.test(path)) {
        this.bHeader = false;
        this.bFooter = true;
      }

      // 不显示头尾
      if (
        path.includes("login") ||
        path.includes("reg") ||
        /detail/.test(path2)
      ) {
        this.bHeader = false;
        this.bFooter = false;
      }
    },
  },
  components: {
    "v-heade": VHeade,
    "v-footer": VFooter,
  },
};
</script>
<style scoped>
#app {
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding: 0rem 0rem 0.8rem 0rem;
}
</style>